<script setup lang="ts">
import { ref } from "vue";
import { list } from "./list";

defineOptions({
  name: "AllocateRule"
});

const selected = ref(0);

function tabClick({ index }) {
  selected.value = index;
}
</script>

<template>
  <div class="main">
    <div class="w-full px-2 pb-2 bg-bg_color mt-2">
      <el-tabs @tab-click="tabClick">
        <template v-for="(item, index) of list" :key="item.key">
          <el-tab-pane :lazy="true">
            <template #label>
              <span>
                {{ item.title }}
              </span>
            </template>
            <component :is="item.component" v-if="selected == index" />
          </el-tab-pane>
        </template>
      </el-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
